<template>
  <div class="floor">
    <div>楼层</div>
    <el-row :gutter="20">
      <el-col :span="5">
        <el-card class="floor-left" style="height: 614px" shadow="hover">
          <img src="http://api.qingwuit.com/Uploads/adv/2019_11_14/15737130641814.jpg" alt="">
        </el-card>
      </el-col>
      <el-col :span="19">

        <el-row :gutter="10" class="floor-right-line">
          <el-col :span="6" v-for="item in 4" :key="item">
            <el-card class="box-card" shadow="hover">
              <div slot="header" class="clearfix">
                <span>卡片名称</span>
                <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
              </div>
              <div v-for="o in 4" :key="o" class="text item">
                {{'列表内容 ' + o }}
              </div>
            </el-card>
          </el-col>
        </el-row>

        <el-row :gutter="10">
          <el-col :span="6" v-for="item in 4" :key="item" class="floor-right-line">
            <el-card class="right-item" shadow="hover" >
              <div v-for="o in 4" :key="o" class="text item">
                {{'列表内容 ' + o }}
              </div>
            </el-card>
          </el-col>
        </el-row>

      </el-col>
    </el-row>
  </div>

</template>

<script>
export default {
  name: 'FloorItem'
}
</script>

<style scoped lang="scss">
  .floor {
    padding-bottom: 50px;
    .floor-left {
      /deep/ .el-card__body {
        padding: 0;
      }

      img {
        width: 100%;
      }
    }

    .floor-right-line {
      height: 308px;
      /deep/ .el-card {
        height: 304px;
      }
    }
  }
</style>
